<template>
	<view class="content-img">
		<eui-nav-bar title="人员选择" color="#000" rightIcon="" />
		<eui-search-bar v-model="searchValue" @confirm="selStoreById" radius="100" placeholder="请输入编号/姓名/拼音简写">
		</eui-search-bar>
	</view>
	<view class="main-view">
		<view class="main-view-bg">
			<scroll-view scroll-y lower-threshold='88' @refresherrefresh="onRefresh" @scrolltolower="templateLower"
				:refresher-enabled='true' :refresher-triggered="triggered"
				:style="{width:scrollWidth,height:scrollHeight}">
				<view class="padding-left-28 font-size-28 flex flex-direction-column background-fff"
					v-for="(item,index) in dateList" :key="index" @click="setSelBackItem(item)">
					<view class="sroll-store-list flex">
						<view class="flex align-items-center margin-right-10">
							<checkbox value="cb" :checked="item.c_checked" @click.stop="setSelBackItem(item)"
								:color="themeColor" :class="[theme]" style="transform:scale(0.8)" v-if="IsMult=='是'" />
							<radio :value="item.c_userno" :checked="item.c_checked" @click.stop="setSelBackItem(item)"
								:color="themeColor" :class="[theme]" style="transform:scale(0.8)" v-else />
						</view>
						<view>
							<view class="font-weight-bold">[{{item.c_userno}}]{{item.c_name}}</view>
							<view class="flex margin-top-20 font-size-24">
								<view class="flex-1"><span class="color-888">类型 </span><span
										v-if="item.c_type">{{item.c_type}}</span></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="user-footer flex-1 flex">
				<!-- <eui-button type="primary" title="确定" @click="BackMultParm" singleTag="primary_主按钮" /> -->
				<view class="flex-1 flex" style="padding-right: 7.5px;" @click="CancelCondition">
					<view class="flex-1 flex justify-content-center align-items-center bottom-bg"
						style="border: solid 1rpx rgba(136, 136, 136, 1);font-size: 15px;">取消</view>
				</view>
				<view class="flex-1 flex justify-content-center align-items-center" style="padding-left: 7.5px;"
					@click="BackMultParm">
					<view class="flex-1 flex justify-content-center align-items-center bottom-bg button-theme"
						:class="{'opacity-half':!hasChecked,[theme]:true}" style="color: #fff;font-size: 15px;">
						确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup type="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import service from '../../common/service';
	import Enjoy from '../../common/enjoy';
	import { storeToRefs } from 'pinia';
	import { useMainStore } from '../../store/modules/store';
	import { useLoginStore } from '../../store/modules/useLoginStore';
	import { useThemeStore } from '@/store/themeStore';
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	const themeColor = ref(themeStore.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')
	
	const searchValue = ref('');
	const dataPage = ref({
		CurrentPage: 1, //当前页码
		PageCount: 0,//总共多少页
		PageSize:20,//一页多少条
		RowsCount: 0,//总共多少条
	});
	
	const IsNotPage = ref(false);
	const IsMult = ref('否');
	const SelectedItems = ref("");
	const triggered = ref(false);
	const WhereList = ref([]);
	const dateList = ref([]);
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 20 + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight -130 +'px');
	const hasChecked = ref(false)
	
	const selStoreById =()=>{
		dataPage.value.CurrentPage = 1;
		dateList.value = [];
		GetUserInfoList();
	}
	const setSelBackItem = e=>{
		if(IsMult.value == '否'){
			for (let i = 0; i < dateList.value.length; i++) {
				dateList.value[i].c_checked=false;
				if(dateList.value[i].c_userno == e.c_userno){
					dateList.value[i].c_checked=true;
				}
			}
			// let parms = {
			// 	Key: e.c_userno,
			// 	Value: e.c_name,
			// }
			// Enjoy.DialogCallBack(parms)
		}else{
			e.c_checked = !e.c_checked;
		}
		DataHasChecked()
	}
	const CancelCondition = () =>{
		uni.navigateBack({
			delta: 1
		});
	}
	// 多选情况下处理选中的数据以及返回处理
	const BackMultParm = () =>{
		if(!hasChecked.value){
			return false
		}
		let cKey = [];
		let cValue = [];
		for (let i = 0; i < dateList.value.length; i++) {
			if(dateList.value[i].c_checked){
				cKey.push(dateList.value[i].c_userno);
				cValue.push(dateList.value[i].c_name);
			}
		}
		if(cKey.length==0){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: '请先选择人员!',
			});
			return false;
		}
		let parms = {
			Key: cKey.toString(),
			Value: cValue.toString(),
		}
		Enjoy.DialogCallBack(parms)
	}
	// 下拉刷新
	const onRefresh = ()=>{
		if (triggered.value) {
			return false;
		};
		triggered.value = true;
		dataPage.value.CurrentPage = 1;
		dateList.value = [];
		GetUserInfoList();
		setTimeout(() => {
			triggered.value = false;
		}, 1000)
	}
	// 加载更多
	const templateLower = ()=>{
		if (dataPage.value.CurrentPage < dataPage.value.PageCount) {
			dataPage.value.CurrentPage +=1;
			GetUserInfoList();
		}
	}
	const GetUserInfoList = ()=>{
		service.enjoyShowLoading('正在加载...');
		let searchWhereList = [];
		if(searchValue.value){
			searchWhereList = [{
				c_left: '(',
				c_type_name: '',
				c_col: 'c_name',
				c_oper: '相似',
				c_value: '%' + searchValue.value + '%',
				c_col_dtype: "System.String",
				c_logic: "或者",
				c_right: ")",
			},
			{
				c_left: '(',
				c_type_name: '',
				c_col: 'c_userno',
				c_oper: '相似',
				c_value: '%' + searchValue.value + '%',
				c_col_dtype: "System.String",
				c_logic: "或者",
				c_right: ")",
			},
			{
				c_left: '(',
				c_type_name: '',
				c_col: 'c_group',
				c_oper: '相似',
				c_value: '%' + searchValue.value + '%',
				c_col_dtype: "System.String",
				c_logic: "或者",
				c_right: ")",
			},
			{
				c_left: '(',
				c_type_name: '',
				c_col: 'c_pycode',
				c_oper: '相似',
				c_value: '%' + searchValue.value + '%',
				c_col_dtype: "System.String",
				c_logic: "或者",
				c_right: ")",
			}];
		}
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40通讯录",
		        ObjectData: {
					IsNotPage: IsNotPage.value,
					PageSize:dataPage.value.PageSize, 
					CurrentPage:dataPage.value.CurrentPage,
					// CurrentUser:mainStore.loginInfo.sUser,
					WhereList: searchWhereList.length>0?searchWhereList:null,
					// where:WhereList.value.length>0?WhereList.value:null
				},
		        MethodName: "GetUserInfoList",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					if(ObjectData){
						dataPage.value.RowsCount = ObjectData.RowsCount;
						dataPage.value.PageCount = ObjectData.PageCount;
						const list = ObjectData.ReturnObject;
						if (list && list.length > 0) {
							let selD = [];
							if(SelectedItems.value){
								selD = SelectedItems.value.split(',');
							}
							for (let i = 0; i < list.length; i++) {
								if(list[i].c_name != 'Group'){
									if(selD.length>0){
										let cN = 0;
										for (let bb = 0; bb < selD.length; bb++) {
											if(list[i].c_userno==selD[bb]){
												cN+=1;
											}
										}
										dateList.value.push({
											...list[i],
											c_checked:cN>0?true:false
										});
									}else{
										dateList.value.push({
											...list[i],
											c_checked:false
										});
									}
								}
							}
						}
					}
					DataHasChecked()
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const DataHasChecked = () =>{
		hasChecked.value = false;
		for (let i = 0; i < dateList.value.length; i++) {
			if(dateList.value[i].c_checked){
				hasChecked.value = true;
			}
		}
	}
	onLoad(option=>{
		console.log("option: " + JSON.stringify(option));
		if(option&&option.IsMult){
			IsMult.value = option.IsMult;
			setTimeout(function() {
				uni.getSystemInfo({
					success: function(res) {
						const userInfoPage = uni.createSelectorQuery().select(".content-img");
						userInfoPage.boundingClientRect(function(data) {
							scrollHeight.value = (res.windowHeight - data.height - 65 - uni.getSystemInfoSync().safeAreaInsets.bottom)+'px';
						}).exec()
					}
				});
			}, 500);
		}
		if(option&&option.SelectedItems){
			SelectedItems.value = option.SelectedItems;
		}
		if(option&&option.IsNotPage){
			IsNotPage.value = option.IsNotPage;
		}
		// if(option&&option.WhereList){
		// 	WhereList.value = JSON.parse(option.WhereList);
		// }
		GetUserInfoList();
	})
</script>

<style lang="scss" scoped>
	@import '../../main.scss';

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.margin-top-20 {
		margin-top: 20rpx;
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.padding-left-28 {
		padding-left: 28rpx;
	}

	.content-img {
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		width: 100%;
	}

	.color-888 {
		color: rgba(136, 136, 136, 1);
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		padding: 20rpx;
		background-color: #f2f2f2;
	}

	.main-view-bg {
		// background-color: #fff;
		border-radius: 20rpx;
	}

	.background-fff {
		background-color: #fff;
	}

	.background-fff:first-child {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.background-fff:last-child {
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.background-fff:last-child .sroll-store-list {
		border-bottom: none;
	}


	.sroll-store-list {
		padding: 20rpx 28rpx 20rpx 0;
		border-bottom: solid 1px rgba(238, 238, 238, 1);
		line-height: 1;
	}

	.font-size-28 {
		font-size: 28rpx;
	}

	.store-checked {
		background-color: rgba(249, 250, 252, 1) !important;
	}

	.user-footer {
		position: fixed;
		z-index: 9;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 28rpx;
	}

	.margin-right-10 {
		margin-right: 10rpx;
	}

	.justify-content-center {
		justify-content: center;
	}

	.bottom-bg {
		height: 40px;
		border-radius: 20px;
	}

	.align-items-center {
		align-items: center;
	}

	.button-theme {
		background: var(--theme-bgc-color);
	}

	.font-weight-bold {
		font-weight: 600;
	}

	::v-deep .uni-checkbox-input {
		border-radius: 50%;
		// background: var(--theme-bgc-color);
		border: 1px solid var(--theme-color);
	}

	::v-deep .uni-checkbox-input svg {
		transform: translate(-100%, -100%) scale(1);
		background: var(--theme-bgc-color);
		border-radius: 50%;
		color: #fff !important;
		top: 22px;
		left: 22px;
	}

	::v-deep .uni-checkbox-input svg path {
		fill: #fff !important;
		transform: translate(10%, 10%) scale(0.8);
	}

	.opacity-half {
		opacity: 0.5;
	}
</style>